<template>
	<div id="mychart" style="height: 350px; width: 54vw;"></div>
</template>

<script>
	import * as echarts from "echarts";
	export default {
    props:{

    },
	  data() {
	    return {
        lineList:[],
        xdata:[],
        ydata1:[],
        ydata2:[]
	    };
	  },
	  mounted() {
	      this.getStatisticsList();
	  },
	  methods: {
     getStatisticsList () {
         http({
          url: http.adornUrl('/admin/homePage/weekStatistics'),
          method: 'get',
          data:{ }
        }).then(({ data }) => {
            console.log(data)
             data.forEach(item=>{
               this.xdata.push(item.month)
                this.ydata1.push(item.monthSaleNumber)
               this.ydata2.push(item.monthRefundNumber)
             })
             console.log(this.ydata1)
              console.log(this.ydata2)
             this.initEcharts(this.xdata,this.ydata1,this.ydata2)
        }).catch(() => {

        })
      },
	initEcharts(xdata,ydata1,ydata2){
		const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
		var option = {
		    backgroundColor: '#fff',
		    title: {
		        text: '订单成交量',
		        textStyle: {
		            fontSize: 19,
		            fontWeight: 800
		        },
		        left: '5%',
		        top: '5%'
		    },
		    legend: {
		        icon: 'circle',
		        top: '5%',
		        right: '35%',
		        itemWidth: 6,
		        itemGap: 20,
		        textStyle: {
		            color: '#556677'
		        }
		    },
		    grid: {
		        top: '20%',
            left:'7%',
            right:'7%',
            bottom:'12%'

		    },
		    xAxis: [{
		        type: 'category',
		        data: xdata,
		        axisLine: {
		            lineStyle: {
		                color: '#DCE2E8'
		            }
		        },
		        axisTick: {
		            show: false
		        },
		        axisLabel: {
		            interval: 0,
		            textStyle: {
		                color: '#556677'
		            },
		            fontSize: 12,
		            margin: 15
		        },
		        axisPointer: {
		            label: {
		                padding: [0, 0, 10, 0],
		                margin: 15,
		                fontSize: 12,
		                backgroundColor: {
		                    type: 'linear',
		                    x: 0,
		                    y: 0,
		                    x2: 0,
		                    y2: 1,
		                    colorStops: [{
		                        offset: 0,
		                        color: '#fff'
		                    }, {
		                        offset: 0.86,
		                        color: '#fff'
		                    }, {
		                        offset: 0.86,
		                        color: '#33c0cd'
		                    }, {
		                        offset: 1,
		                        color: '#33c0cd' // 100% 处的颜色
		                    }],
		                    global: false // 缺省为 false
		                }
		            }
		        },
		        boundaryGap: false
		    }],
		    yAxis: [{
		        type: 'value',
		        axisTick: {
		            show: false
		        },
		        axisLine: {
		            show: true,
		            lineStyle: {
		                color: '#DCE2E8'
		            }
		        },
		        axisLabel: {
		            textStyle: {
		                color: '#556677'
		            }
		        },
		        splitLine: {
		            show: false
		        }
		    }],
		    series: [{
		            name: '本月订单数',
		            type: 'line',
		            data:ydata1,
		            symbolSize: 1,
		            symbol: 'circle',
		            smooth: true,
		            yAxisIndex: 0,
		            showSymbol: false,
		            lineStyle: {
		                width: 5,
		                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
		                        offset: 0,
		                        color: '#9effff'
		                    },
		                    {
		                        offset: 1,
		                        color: '#9E87FF'
		                    }
		                ]),
		                shadowColor: 'rgba(158,135,255, 0.3)',
		                shadowBlur: 10,
		                shadowOffsetY: 20
		            },
		            itemStyle: {
		                normal: {
		                    color: colorList[0],
		                    borderColor: colorList[0]
		                }
		            }
		        }, {
		            name: '本月退单数',
		            type: 'line',
		            data:ydata2,
		            symbolSize: 1,
		            symbol: 'circle',
		            smooth: true,
		            yAxisIndex: 0,
		            showSymbol: false,
		            lineStyle: {
		                width: 5,
		                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
		                        offset: 0,
		                        color: '#73DD39'
		                    },
		                    {
		                        offset: 1,
		                        color: '#73DDFF'
		                    }
		                ]),
		                shadowColor: 'rgba(115,221,255, 0.3)',
		                shadowBlur: 10,
		                shadowOffsetY: 20
		            },
		            itemStyle: {
		                normal: {
		                    color: colorList[1],
		                    borderColor: colorList[1]
		                }
		            }
		        }
		    ]
		};
			 const myChart = echarts.init(document.getElementById("mychart"));// 图标初始化
			      myChart.setOption(option);// 渲染页面
			      //随着屏幕大小调节图表
			      window.addEventListener("resize", () => {
			        myChart.resize();
			      });
		}
	  }

		}
</script>

<style>
</style>
